<div>
  <div class="demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 60, bottom: 0 }">
    <d-demo-nav [navItems]="navItems"></d-demo-nav>
    <div class="demo-example" [dAnchor]="'basic-usage'">
      <div class="demo-title">基本用法</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-basic" [sourceData]="TreeSelectBasicComponent">
        <d-tree-select-basic demo></d-tree-select-basic>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'labelization'">
      <div class="demo-title">标签化配置</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-labelization" [sourceData]="TreeSelectLabelizationComponent">
        <d-tree-select-labelization demo></d-tree-select-labelization>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'leaf-only'">
      <div class="demo-title">仅叶节点可选</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-leaf-only" [sourceData]="TreeSelectLeafOnlyComponent">
        <d-tree-select-leaf-only demo></d-tree-select-leaf-only>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'init-hooks'">
      <div class="demo-title">初始化完成时调用的钩子</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-hooks" [sourceData]="TreeSelectHooksComponent">
        <d-tree-select-hooks demo></d-tree-select-hooks>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'simple-search'">
      <div class="demo-title">可简易搜索树</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-searchable" [sourceData]="TreeSelectSearchableComponent">
        <d-tree-select-searchable demo></d-tree-select-searchable>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'append-to-element'">
      <div class="demo-title">Append To Element 能力</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-append-to" [sourceData]="TreeSelectAppendToComponent">
        <d-tree-select-append-to demo></d-tree-select-append-to>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'custom-icon'">
      <div class="demo-title">自定义icon能力</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-custom-icon" [sourceData]="TreeSelectCustomIconComponent">
        <d-tree-select-custom-icon demo></d-tree-select-custom-icon>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'keys'">
      <div class="demo-title">自定义key</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-keys" [sourceData]="TreeSelectKeysComponent">
        <d-tree-select-keys demo></d-tree-select-keys>
      </d-codebox>
    </div>
    <div class="demo-example" [dAnchor]="'icon-parent'">
      <div class="demo-title">自定义节点展开关闭图标</div>
      <div class="demo-text"></div>
      <d-codebox id="tree-select-icon-parent" [sourceData]="TreeSelectIconParentComponent">
        <d-tree-select-icon-parent demo></d-tree-select-icon-parent>
      </d-codebox>
    </div>
  </div>
</div>
